let descriptionComponent = {
    template: `
        <div class="description page">
            <div class="head">
               <div class="left" @click="back">
                    <span class="iconfont icon-ali-fanhui"></span>
                </div>
                <div class="title">SESSION DESCRIPTION</div>
                <div class="right"></div>
            </div>
            <div class="main">
                <div class="info">
                    <div class="item">
                        <span class="label">Title</span>
                        <span class="input"><input type="text" v-model="title" placeholder="Caption your Session"></span>
                    </div>
                    <div class="item">
                        <span class="label">Author</span>
                        <span class="input"><input type="text" v-model="description" placeholder="Input your Name"></span>
                    </div>
                    <div class="item">
                        <span class="label">Audio Language</span>
                        <span class="input">
                            <select v-model="languageId">
                                <option v-for="item in languageList" :label="item.name" :value="item.id"></option>
                            </select>
                        </span>
                    </div>
                    <div class="item">
                        <span class="label">Category</span>
                        <span class="input">
                            <select v-model="categoryId">
                                <option v-for="item in categoryList" :label="item.name" :value="item.id"></option>
                            </select>
                        </span>
                    </div>
                    <div class="item" v-show="false">
                        <span class="label">ConfirmType</span>
                        <span class="input">
                            <select v-model="confirmationType">
                                <option v-for="item in confirmTypes" :label="item.name" :value="item.type"></option>
                            </select>
                        </span>
                    </div>
                    <div class="btn" @click="back()">back record section page</div>
                    <div class="btn" @click="toQuestion()">New Question</div>
                    <div class="questions">
                        <div class="question-item" v-for="(question,i) in questionnaireList">
                            <div class="btn-controls">
                                <div class="click" @click="deleteQuestion(i)">Delete</div>
                                <div class="click" @click="toQuestion(question.id)">Edit</div>
                            </div>
                            <div class="name">{{question.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="controls">
                <div class="btn" @click="handleControl(btn)" v-for="btn in btnList">
                   <div> {{btn.value}}</div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            btnList: [
                {
                    name: 'preview',
                    value: 'Preview'
                },
                {
                    name: 'save',
                    value: 'Save'
                },
                {
                    name: 'submit',
                    value: 'Submit'
                }
            ],
            confirmTypes:[
                {
                    type: 'click',
                    name:'Click'
                },
                {
                    type: 'touch',
                    name: 'Touch'
                }
            ],
            title: null,
            languageId: null,
            categoryId: null,
            languageList: [],
            categoryList: [],
            description:null,
            confirmationType:null,
            questionnaireList:[]
        }

    },
    computed: {},
    watch: {},
    mounted() {

        language.getList().then(({entities})=>{
            this.languageList = entities
            this.languageId = this.languageList[0].id
            category.getList().then((result)=>{
                this.categoryList = result
                this.categoryId = this.categoryList[0].id
                this.sessionId = Number(this.$route.query.sessionId)
                treatmentSession.getItem(this.sessionId).then((r)=>{
                    this.questionnaireId = r.questionnaireId
                    this.title = r.name || 'New Session'
                    this.confirmationType = r.confirmationType || 'click'
                    this.description = r.description || 'Tester'

                    if(r.languageId){
                        this.languageId = r.languageId
                    }
                    if(r.categoryId){
                        this.categoryId = r.categoryId
                    }
                    question.getList(this.sessionId).then((r)=>{
                        this.questionnaireList = r.entities
                    })
                })

            })
        })
    },
    activated() {

    },
    methods: {
        deleteQuestion(i){
            this.questionnaireList.splice(i,1)
            question.updateList(this.$route.query.sessionId,this.questionnaireList)
                .then(()=>{

                })

        },
        toQuestion(id){

            if(!id){
                question.create({
                    name: 'Default Name'
                }).then((r)=>{

                    this.questionnaireList.push(r)
                    question.updateList(this.$route.query.sessionId,this.questionnaireList)
                        .then(()=>{
                            this.$router.push({
                                name: 'questions',
                                query:{
                                    sessionId: this.$route.query.sessionId,
                                    questionnaireId: r.id
                                }
                            })
                        })

                })
            } else {

                    this.$router.push({
                        name: 'questions',
                        query:{
                            sessionId: this.$route.query.sessionId,
                            questionnaireId: id
                        }
                    })

            }

        },
        saveSubmit(type,callback){
            treatmentSession.body.name = this.title || 'Default Title'
            treatmentSession.body.languageId = this.languageId
            treatmentSession.body.categoryId = this.categoryId
            treatmentSession.body.confirmationType = this.confirmationType || 'click'
            treatmentSession.body.description = this.description || 'Tester'

            if(type === 'submit'){
                treatmentSession.body.publishTime = parseTime(new Date())
                treatmentSession.body.state = 1
            }
            treatmentSession.update({
                ...treatmentSession.body,
                id: Number(this.$route.query.sessionId)
            }).then((result)=>{
                if(callback){
                    callback()
                }

            })
        },
        handleControl(btn){
            switch (btn.name){
                case 'preview':
                    this.$router.push({
                        name: 'detail',
                        query:{
                            type: 'preview',
                            sessionId: this.$route.query.sessionId
                        }
                    })
                    break
                case 'save':
                case 'submit':

                    this.saveSubmit(btn.name,()=>{
                        this.$router.back()
                        this.$message.success(btn.name+'success')
                    })
                    break
            }
        },
        back(){
          this.$router.back()
        },

        toDescription(){
            this.$router.push({
                name: 'description'
            })
        }
    },
    components: {},
    beforeRouteLeave(to, from, next) {
        this.saveSubmit('save')
        next();
    }
}

